<!--深度-->
<template>
  <div class="vt-chi-cell" >
    <div class="head">
      <div :class="['head-type', Config.upDownBg(item.positionSide=='LONG')]">
        <text class="font24 text1">{{typeStr}}</text>
      </div>
      <div class="row acenter">
        <text class="font32 text1">{{item.counterCoin+'/'+item.baseCoin+ T('永续')}}</text>
        <div class="width10"></div>
        <text class="font24 text2">{{T('全仓')+' '+item.leverage+'X'}}</text>
      </div>
    </div>

    <div class="row">
      <div class="column all">
        <text class="font24 text3">{{T('未实现盈亏')+' (USDT)'}}</text>
        <div class="height6"></div>
        <text :class="['font24', Config.upDownFont(item.unrealizedProfitRate)]">{{item.unrealizedProfit}}</text>
      </div>
      <div class="column all aend">
        <text class="font24 text3">{{T('回报率')}}</text>
        <div class="height6"></div>
        <text :class="['font24', Config.upDownFont(item.unrealizedProfitRate)]">{{item.unrealizedProfitRate+'%'}}</text>
      </div>
    </div>

    <div class="height20"></div>
    <div class="row">
      <div class="column all">
        <text class="font24 text3">{{T('持仓数量')+' ('+item.counterCoin+')'}}</text>
        <div class="height6"></div>
        <text class="font24 text2">{{item.positionAmt}}</text>
      </div>
      <div class="column all">
        <text class="font24 text3">{{T('保证金')+' (USDT)'}}</text>
        <div class="height6"></div>
        <text class="font24 text2">{{item.positionInitialMargin}}</text>
      </div>
      <div class="column all aend">
        <text class="font24 text3">{{T('保证金率')}}</text>
        <div class="height6"></div>
        <text :class="['font24', Config.upDownFont(item.positionMarginRate)]">{{item.positionMarginRate+'%'}}</text>
      </div>
    </div>

    <div class="height30"></div>
    <div class="row">
      <div class="column all">
        <text class="font24 text3">{{T('开仓价格')+' (USDT)'}}</text>
        <div class="height6"></div>
        <text class="font24 text2">{{item.openPrice}}</text>
      </div>
      <div class="column all aend">
        <text class="font24 text3">{{T('标记价格')+' (USDT)'}}</text>
        <div class="height6"></div>
        <text class="font24 text2">{{item.markPrice}}</text>
      </div>
      <div class="column all aend">
        <text class="font24 text3">{{T('强平价格')+' (USDT)'}}</text>
        <div class="height6"></div>
        <text class="font24 text2">{{item.liquidationPrice}}</text>
      </div>
    </div>

    <div class="height30"></div>
    <div class="row jbetween">
      <div class="cell-but bg2" @click="tzggClick">
        <text class="font26 text1">调整杠杆</text>
      </div>
      <!-- <div class="cell-but bg2" @click="zyzsClick">
        <text class="font26 text1">止盈止损</text>
      </div> -->
      <div class="cell-but bg2" @click="pcClick">
        <text class="font26 text1">平仓</text>
      </div>
    </div>
    <div class="cell-line bg4"></div>
  </div>
</template>


<script>
import jconfig from "@/_js/config"
import jmath from "@/_js/math"
import jnavigator from "@/_js/navigator"

const weexFunction = weex.requireModule("WeexFunction")
const WeexTrading = weex.requireModule("WeexTrading")
const globalEvent = weex.requireModule('globalEvent');

import I18N from "@/_i18n/i18n";
var T = I18N.t;
export default {

  props:{
    item: Object,
    isContract: {
      type: Boolean,
      default:true
    }
  },

  data() {
    return {
      T:T,
      Config:jconfig,
    };
  },

  mounted() {
    jconfig.init(()=>{
    }, [jconfig.OPT_UP_DOWN]);
  },
  
  computed: {
    typeStr() {
      return this.item.positionSide=='LONG' ? T('做多') : T('做空')
    }
  },

  methods: {

    /******************************** 点击 */
    //调整杠杠
    tzggClick() {
      this.$emit('tzgg', this.item);
    },

    //止盈止损
    zyzsClick() {
      this.$emit('zyzs', this.item);
    },

    //平仓
    pcClick() {
      this.$emit('pc', this.item);
    }
  }
};

</script>

<style src="@/_css/style.css" ></style>

<style scoped>
.vt-chi-cell {
  flex-direction: column;
  padding: 30px 40px;
}
.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 35px;
}
.head-type {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 2px;
  margin-right: 20px;
  padding: 10px;
}
.cell-but {
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 64px;
  border-radius: 8px;
}
.cell-line{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height:1px;
}
</style>